import React, { Component } from 'react'
import {
  View, TextInput, StyleSheet, Text, Image, SafeAreaView, Navigator, ScrollView, TouchableOpacity, Switch
} from 'react-native'
import NavBar from '../../../../components/PublicHeader';
import { Images } from '../../../../public/images/images'


export default class notification extends Component {
  constructor(props) {
    super(props)
    this.state = {
      Generalsettingss: [
        {
          name: '新消息通知',
        },
        {
          name: '语音和视频电话提醒',
        },
        {
          name: '临时对话消息',
        },
        {
          name: '消息布局样式',

        }
      ],
      Toppinge: false,
      Topping: false,
      disturb: false,
      isEnabled: false,


    }


  }

  componentDidMount = () => {


  }

  onChangeText(text) {
    this.setState({
      searchText: text
    })
  };

  onClick() {

  }

  render() {
    const toggleTopping = () => {
      if (this.state.Topping) {
        this.setState({ Topping: false })
      } else {
        this.setState({ Topping: true })
      }
    }
    const toggledisturb = () => {
      if (this.state.Toppinge) {
        this.setState({ Toppinge: false })
      } else {
        this.setState({ Toppinge: true })
      }
    }
    const toggleshield = () => {
      if (this.state.disturb) {
        this.setState({ disturb: false })
      } else {
        this.setState({ disturb: true })
      }
    }
    const toggleshielde = () => {
      if (this.state.isEnabled) {
        this.setState({ isEnabled: false })
      } else {
        this.setState({ isEnabled: true })
      }
    }
    return (
      <SafeAreaView style={styles.container}>
        <NavBar
          navigation={this.props.navigation}
          title={"消息通知"}
        />
        <View style={styles.warper}>
          <View style={{ backgroundColor: "white" }}>
            <View style={styles.tail}>
              <Text style={styles.tails}>
                新消息通知
              </Text>
              <Switch
                trackColor={{ false: "#767577", true: "#34C759" }}
                ios_backgroundColor="#3e3e3e"
                value={this.state.Topping}
                onValueChange={toggleTopping} />
            </View>

            <View style={styles.tail}>
              <Text style={styles.tails}>
                语音和视频电话提醒
              </Text>
              <Switch
                trackColor={{ false: "#767577", true: "#34C759" }}
                ios_backgroundColor="#3e3e3e"
                value={this.state.Toppinge}
                onValueChange={toggledisturb} />
            </View>

            <View style={styles.tail}>
              <Text style={styles.tails}>
                临时对话消息
              </Text>
              <Switch
                trackColor={{ false: "#767577", true: "#34C759" }}
                ios_backgroundColor="#3e3e3e"
                value={this.state.disturb}
                onValueChange={toggleshield} />
            </View>

            <View style={styles.tail}>
              <Text style={styles.tails}>
                消息布局样式
              </Text>
              <Switch
                trackColor={{ false: "#767577", true: "#34C759" }}
                ios_backgroundColor="#3e3e3e"
                value={this.state.isEnabled}
                onValueChange={toggleshielde} />
            </View>
          </View>
        </View>
        <TouchableOpacity onPress={() => (
          this.props.navigation.navigate('remind')
        )}>
          <View style={styles.middle}>
            <Text style={styles.tails} >消息提醒设置</Text>
            <Image source={require('../../../../assets/images/maillist/Vector.png')} />
          </View>
        </TouchableOpacity>
      </SafeAreaView >
    )
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    display: 'flex',
    textAlign: 'center',
  },
  warper: {
    marginTop: 10,
    paddingLeft: 15,
    paddingRight: 15,
    backgroundColor: "#fff"
  },
  layer: {
    display: 'flex',
    justifyContent: 'space-around'
    , alignItems: 'center',
    flexDirection: 'row',
    marginTop: 80

  },
  General: {
    flexDirection: 'row', height: 40, lineHeight: 40, marginLeft: '7%', justifyContent: 'space-between',
    borderBottomWidth: 1,
    borderBottomColor: '#f2f2f2'
  },
  Generals: {
    marginTop: '4%', backgroundColor: 'white'
  },
  tail: {
    flexDirection: 'row', justifyContent: 'space-between', height: 55, alignItems: "center",
    borderBottomWidth: 1,
    borderBottomColor: '#f2f2f2'
  },
  tails: {
    fontSize: 16,
    color: "#333",

  },
  tailText: {
    display: 'flex', flexDirection: 'row', justifyContent: 'space-between', marginTop: 20, height: 40, lineHeight: 40
  },
  middle: {
    height: 55,
    backgroundColor: 'white', paddingLeft: 15, paddingRight: 15, flexDirection: 'row', justifyContent: 'space-between', alignItems: "center", marginTop: 20
  }

})